<!DOCTYPE html>
<html>
    <head>
        <title>rock paper scissors</title>
        <link rel="stylesheet" href="design.css">

    </head>
    <body>
        <h1>ROCK PAPER SCISSORS</h1>
        <hr>
        <div class="box1"><h2>instructions</h2></div>
        <div class = "ins-box">
            <p id="ins">choose any one of the three and you will win or lose respectively by the choice given by the computer</p>
        </div>
        <h2 class = "scoreboard_user" >USER SCORE</h2>
        <div id = "userscorebox"></div>
        <h2 class = "scoreboard_computer">COMPUTER SCORE</h2>
        <div id = "computerscorebox"></div>
        <br>
        <hr>
        <div id = "resultmessage"></div>
        <div class ="buttons">
            <div class = "buttonR">
                <img src = "rock.png" height="100px" width="100px" class="r">
            </div>
            <div class = "buttonP">
                <img src = "paper.png" height="100px" width="100px" class="p">
            </div>
            <div class = "buttonS">
                <img src = "scissors.png" height="100px" width="100px" class="s">
            </div>
        </div>
        <script src="function.js"></script>
    </body>
</html>